<template>
  <div class="cart">
    <van-nav-bar title="购物车">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
<!-- 粘贴组件 -->
<!-- 购物车商品 -->
    <van-swipe-cell v-for="item in getList" :key="item.id" class="goods2">
      <van-card
        :price="item.price"
        desc="描述信息xxxx"
        :title="item.goodsname"
        :thumb="'http://localhost:3000' + item.img"
      >
        <template #footer>
          <van-stepper
            v-model="item.num"
            theme="round"
            button-size="22"
            disable-input
            class="ipt5"
            @plus="add(item.id)"
            @minus="reduce(item.id)"
          />
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="del(item.id)"
        />
      </template>
    </van-swipe-cell>
     <!-- 购物车为空
     <van-empty  description="快去挑选商品吧" /> -->
    <!-- 提交订单 -->
    <van-submit-bar
      :price="sum"
      button-text="提交订单"
      @submit="onSubmit"
      class="bar"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>

  </div>
</template>

<script>
import { cartList, cartEdit, cartDelete } from "../request";

export default {
  data() {
    return {
      checked: true,
      getList: [],
    };
  },
  created() {
    this.getData();
    // console.log(JSON.parse(localStorage.getItem("userInfo")).uid);  获取localStorage里面的uid
  },
  // 渲染数据
  computed: {
    // 循环getList计算总价格
    sum() {
      let sum1 = 0;
      this.getList.forEach((element) => {
        sum1 += element.price * element.num;
      });
      return sum1 * 100;
    },
  },
  methods: {
    onSubmit() {},

    async getData() {
      let uid = JSON.parse(localStorage.getItem("userInfo")).uid;
      let res = await cartList(uid);
      this.getList = res.list;
    },
      //  添加
    async add(id) {
      let res = await cartEdit({
        id: id,
        type: 2,
      });
      console.log(res);
    },
    // 通过获取ID参数 减少
    async reduce(id) {
      let res = await cartEdit({
        id: id,
        type: 1,
      });
      console.log(res);
    },
    // 删除
    async del(id) {
      console.log(id)
      let res = await cartDelete(id);
      // 调用请求
      this.getData();
      console.log(res);
    },
  },
};
</script>

<style>
.ipt5 {
  margin-left: 150px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.cart .van-submit-bar {
  position: fixed !important;
  bottom: 50px !important;
}
</style>